import { useState, useEffect } from 'react';
// import axios from 'axios';

export const App = () => {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(0);

  //   const handleClick = () => {
  //     const [number, setNumber] = useState(0);
  //   };

  // 2、没有依赖。常用
  const effectReturn = useEffect(() => {
    // componentDidMount，发起网络数据请求，添加全局事件
    const fetchData = async () => {
      //   const res = await axios.get('https://toutiao.itheima.net/v1_0/channels');
      //   // 数据的处理
      //   console.log(res);

      // 使用浏览器自带的网络请求方法 fetch
      const res2 = await fetch('https://toutiao.itheima.net/v1_0/channels');
      console.log(typeof res2, res2);
      const jsonData = await res2.json();
      console.log(jsonData, jsonData.data.channels[0]);
    };
    fetchData();
  }, []);

  console.log('effectReturn', effectReturn);

  return (
    <div>
      <h1>count：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <h1>number：{number}</h1>
      <button onClick={() => setNumber(number + 1)}>+1</button>

      {/* <button onClick={handleClick}>按钮</button> */}
    </div>
  );
};
